Website Interaktif dengan HTML5, CSS3 & Javascript
Contoh website interaktif dengan html5, css3 dan javascript | Pada zaman sekarang ini website yang interaktif sudah sangat menjamur karena semakin mudah untuk dibuat, berbagai tool penunjang sudah tersedia baik itu yang gratis maupun berbayar.
Teknologi baru dalam dunia website terus bermunculan, CSS3, HTML5, jQuery dan berbagai pluginnya juga tersedia, bahkan yang tidak kalah tenar saat ini ada React, AngularJS dan lain sebagainya diciptakan untuk mengakomodasi kebutuhan website saat ini.
Website interaktif yang ada saat ini mungkin berbeda dengan website interaktif yang kita kenal dahulu, dulu interaksinya tidak seperti sekarang, dulu mungkin hanya klik link lalu scroll, atau muncul popup. Namun sekarang sudah berbeda, web designer saat ini sudah sangat memperhatikan User Experience, jadi kenyamanan dan kemudahan bagi para pengunjung ketika mengakses website tersebut sangat-sangat diperhatikan.
Website interaktif yang ada saat ini membawa kita pada petualangan berbasis pengguna atau menarik kita melalui gerak dan suara sambil memberikan kita kekuatan pilihan.
Intaraksinya bisa sesederhana seperti serangkaian klik yang menavigasi kita mengarungi cerita ataupun landscape, bisa juga menjadi rumit seperti bergerak melalui lingkungan 3D untuk menemukan konten yang tersembunyi atau mencapai tujuan untuk bergerak ke langkah berikutnya.
Semuanya itu sangat mungkin untuk diciptakan saat ini dengan kemampuan HTML5, CSS3, Javascript, WebGL dan teknologi website lainnya. Kecepatannya pun sangat terbantu dengan berbagai teknologi optimasi website yang sekarang mulai banyak digunakan oleh developer.
Jelajahi keindahan Humboldt California menggunakan navigasi yang aneh untuk membantu pengunjung mengekplorasi dan menandai lokasi yang ditampilkan dalam video fullscreen untuk membuat jadwal perjalanan.
Panera membawa pengunjung untuk melalui tiga permodelan rumit dan animasi foodscapes saat melakukan aksi dan misi pada website tersebut.
Villes & Paysages adalah agensi arsitektur dan badan perencanaan kota internasional yang menggunakan gestur dan peta interaktif untuk mengekplorasi berbagai proyek yang pernah mereka kerjakan.
Cobay.es menawarkan kesempatan untuk membentuk pendapat Anda sendiri tentang pengujian hewan melalui pengalaman interaktif yang melibatkan sebagian besar pada pilihan dan melakukan scroll.
Website liburan Instant Caribbean Vacation merupakan website dengan tampilan antarmuka yang memiliki fitur video 360 derajat. Pengguna dapat memilih petualangan mereka sendiri yang mereka ambil dalam pemandangan dan suara dari pelayaran.
Website game HTML5 yang menyenangkan ini menampilkan gambar dari film retro dan menantang Anda untuk mengetik aktor secepat yang Anda bisa untuk mendapatkan skor yang tinggi.
Artis musik Residente mendokumentasikan perjalanannya diseluruh dunia. Situs ini dilengkapi dengan peta interaktif dimana kita semua terhubung satu sama lain.
Apakah Anda pernah bertanya-tanya halaman Facebook apa saja yang sudah Anda like? lalu kapan Anda melakukan hal tersebut? Website interaktif bertema Timelikes ini menampilkan semua like yang pernah Anda lakukan besarta tahun Anda melakukannya, website ini dilengkapi dengan timeline 3D yang terlihat luar biasa keren. Untuk bisa melakukan ini Anda harus menghubungkan website ini dengan Akun Facebook Anda, Anda bisa melakukan navitasi dengan maju mundur di timeline tersebut.
The Eyezen Challenge adalah sebuah game menarik yang memungkinkan Anda untuk menghadapi bintang Fanatic eSport yaitu Martin “Rekkles” Larsson, gunakan mata Anda saja ya..
Radio Garden membawa kita Jelajahi dan dengarkan radio-radio yang ada diseluruh dunia dengan website ini, radio Indonesia juga ada lho, Anda akan digiring langsung untuk memilih radio yang berada disekitar lokasi Anda berada saat ini, berdasarkan koneksi internet yang Anda gunakan.
Berjalan-jalan melalui tradisi liburan New York, Anda bisa melihat 18 toko yang berbeda dan menampilkan sihir mereka melalui efek parallax 360 yang sangat menarik di website Window Wonderland.
Animasi GSAP, snap.svg dan cerita visual hadir bersamaan dalam pembuatan sebuah restrospektif mendalam dari Pusat Antariksa Kennedy.
Website portofolio dari agensi digital ini menggunakan berbagai librari Javascript diantaranya triangle.js, angular.js, underscore.js, dan hammer.js untuk mendemonstrasikan skill tampilan antarmukanya yang mumpuni. Ini adalah contoh penggunaan fitur yang menekankan pada apa yang dipilih oleh pengguna dan lebih lanjut tentang microinteraction dan penggunaan suara.
Pada website Air View ini Anda bisa melihat kualitas udara yang Anda hirup saat ini berdasarkan data visualisasi dari WHO dan Google Street View. Klik pada setiap titik untuk membuka informasi lebih detail tentang masing-masing bagian.
Syria Stories adalah seri video singkat dari zona peperangan yang terjadi di Suriah. Interaksi pengguna adalah sebuah bagian utama yang berfungsi untuk melanjutkan setiap bagian video, menghanyutkan pengguna dan akhirnya membuatnya bersedia untuk memberikan donasi.
Tampilan interaktif dari seniman, penulis Lyndsey Belle Tyler ini dimulai dengan sebuah pilihan dan menawarkan sebuah audio visual untuk menjelajahi kategori berbeda dari portfolionya. Jangan lupa untuk melakukan klik-kanan untuk menampilkan menu dari setiap bagian.
Jelajahi Jepang, Burma dan Vietnam dengan sebuah website yang menampilkan peta interaktif dari setiap pilihan tujuan yang ditawarkan dengan menggunakan pemandangan foto 360 derajat, website ini dibuat dengan Angular dan GSAP.
Ketika Anda masuk ke Hollow Anda akan dikelilingi oleh jutaan tahun evolusi dan sejarah manusia. Interaksi menggunakan gestur untuk bergerak dan memberi Anda dua sudut pandang untuk mengeksplorasi diri. Website ini dibangun dengan WebGL dan Firebase.
Kemudian meloncat ke kursus pembuatan website interaktif yang disediakan oleh CodeCademy.
Anda juga bisa menggunakan resources dibawah ini untuk belajar beberapa script dalam pembuatan website interaktif yang kekinian.
Itulah sejumlah resources dan contoh website interaktif yang dibuat dengan kekuatan HTML5, CSS dan Javascript yang bisa Anda nikmati dan jadikan inspirasi untuk project Anda berikutnya. Semoga apa yang posharian.tk sajikan ini berguna bagi Anda semua.
Teknologi baru dalam dunia website terus bermunculan, CSS3, HTML5, jQuery dan berbagai pluginnya juga tersedia, bahkan yang tidak kalah tenar saat ini ada React, AngularJS dan lain sebagainya diciptakan untuk mengakomodasi kebutuhan website saat ini.
Website interaktif yang ada saat ini mungkin berbeda dengan website interaktif yang kita kenal dahulu, dulu interaksinya tidak seperti sekarang, dulu mungkin hanya klik link lalu scroll, atau muncul popup. Namun sekarang sudah berbeda, web designer saat ini sudah sangat memperhatikan User Experience, jadi kenyamanan dan kemudahan bagi para pengunjung ketika mengakses website tersebut sangat-sangat diperhatikan.
Website interaktif yang ada saat ini membawa kita pada petualangan berbasis pengguna atau menarik kita melalui gerak dan suara sambil memberikan kita kekuatan pilihan.
Intaraksinya bisa sesederhana seperti serangkaian klik yang menavigasi kita mengarungi cerita ataupun landscape, bisa juga menjadi rumit seperti bergerak melalui lingkungan 3D untuk menemukan konten yang tersembunyi atau mencapai tujuan untuk bergerak ke langkah berikutnya.
Semuanya itu sangat mungkin untuk diciptakan saat ini dengan kemampuan HTML5, CSS3, Javascript, WebGL dan teknologi website lainnya. Kecepatannya pun sangat terbantu dengan berbagai teknologi optimasi website yang sekarang mulai banyak digunakan oleh developer.
Contoh website Interaktif modern
Berikut ini adalah beberapa contoh website interaktif yang layak untuk Anda kunjungi, lihat, perhatikan dan bahkan dijadikan inspirasi untuk project Anda berikutnya.Cavalier
Cavalier adalah eksperimen yang luar biasa kerena dibuat dengan WebGL dan SVG, menghasilkan 3D game berbasis browser website.
Humboldt California
Jelajahi keindahan Humboldt California menggunakan navigasi yang aneh untuk membantu pengunjung mengekplorasi dan menandai lokasi yang ditampilkan dalam video fullscreen untuk membuat jadwal perjalanan.
Panera
Panera membawa pengunjung untuk melalui tiga permodelan rumit dan animasi foodscapes saat melakukan aksi dan misi pada website tersebut.
Villes & Paysages
Villes & Paysages adalah agensi arsitektur dan badan perencanaan kota internasional yang menggunakan gestur dan peta interaktif untuk mengekplorasi berbagai proyek yang pernah mereka kerjakan.
Cobay.es
Cobay.es menawarkan kesempatan untuk membentuk pendapat Anda sendiri tentang pengujian hewan melalui pengalaman interaktif yang melibatkan sebagian besar pada pilihan dan melakukan scroll.
Instant Caribbean Vacation
Website liburan Instant Caribbean Vacation merupakan website dengan tampilan antarmuka yang memiliki fitur video 360 derajat. Pengguna dapat memilih petualangan mereka sendiri yang mereka ambil dalam pemandangan dan suara dari pelayaran.
Retro Minder
Website game HTML5 yang menyenangkan ini menampilkan gambar dari film retro dan menantang Anda untuk mengetik aktor secepat yang Anda bisa untuk mendapatkan skor yang tinggi.
Residente
Artis musik Residente mendokumentasikan perjalanannya diseluruh dunia. Situs ini dilengkapi dengan peta interaktif dimana kita semua terhubung satu sama lain.
Timelikes
Apakah Anda pernah bertanya-tanya halaman Facebook apa saja yang sudah Anda like? lalu kapan Anda melakukan hal tersebut? Website interaktif bertema Timelikes ini menampilkan semua like yang pernah Anda lakukan besarta tahun Anda melakukannya, website ini dilengkapi dengan timeline 3D yang terlihat luar biasa keren. Untuk bisa melakukan ini Anda harus menghubungkan website ini dengan Akun Facebook Anda, Anda bisa melakukan navitasi dengan maju mundur di timeline tersebut.
Eyezen
The Eyezen Challenge adalah sebuah game menarik yang memungkinkan Anda untuk menghadapi bintang Fanatic eSport yaitu Martin “Rekkles” Larsson, gunakan mata Anda saja ya..
Radio Garden
Radio Garden membawa kita Jelajahi dan dengarkan radio-radio yang ada diseluruh dunia dengan website ini, radio Indonesia juga ada lho, Anda akan digiring langsung untuk memilih radio yang berada disekitar lokasi Anda berada saat ini, berdasarkan koneksi internet yang Anda gunakan.
Window Wonderland
Berjalan-jalan melalui tradisi liburan New York, Anda bisa melihat 18 toko yang berbeda dan menampilkan sihir mereka melalui efek parallax 360 yang sangat menarik di website Window Wonderland.
The Kennedy Center
Animasi GSAP, snap.svg dan cerita visual hadir bersamaan dalam pembuatan sebuah restrospektif mendalam dari Pusat Antariksa Kennedy.
Weareuprising
Website portofolio dari agensi digital ini menggunakan berbagai librari Javascript diantaranya triangle.js, angular.js, underscore.js, dan hammer.js untuk mendemonstrasikan skill tampilan antarmukanya yang mumpuni. Ini adalah contoh penggunaan fitur yang menekankan pada apa yang dipilih oleh pengguna dan lebih lanjut tentang microinteraction dan penggunaan suara.
Air View
Pada website Air View ini Anda bisa melihat kualitas udara yang Anda hirup saat ini berdasarkan data visualisasi dari WHO dan Google Street View. Klik pada setiap titik untuk membuka informasi lebih detail tentang masing-masing bagian.
Syria Stories
Syria Stories adalah seri video singkat dari zona peperangan yang terjadi di Suriah. Interaksi pengguna adalah sebuah bagian utama yang berfungsi untuk melanjutkan setiap bagian video, menghanyutkan pengguna dan akhirnya membuatnya bersedia untuk memberikan donasi.
Lyndsey Belle Tyler
Tampilan interaktif dari seniman, penulis Lyndsey Belle Tyler ini dimulai dengan sebuah pilihan dan menawarkan sebuah audio visual untuk menjelajahi kategori berbeda dari portfolionya. Jangan lupa untuk melakukan klik-kanan untuk menampilkan menu dari setiap bagian.
Explore Japan Burma Vietnam
Jelajahi Jepang, Burma dan Vietnam dengan sebuah website yang menampilkan peta interaktif dari setiap pilihan tujuan yang ditawarkan dengan menggunakan pemandangan foto 360 derajat, website ini dibuat dengan Angular dan GSAP.
Hollow
Ketika Anda masuk ke Hollow Anda akan dikelilingi oleh jutaan tahun evolusi dan sejarah manusia. Interaksi menggunakan gestur untuk bergerak dan memberi Anda dua sudut pandang untuk mengeksplorasi diri. Website ini dibangun dengan WebGL dan Firebase.
BUAT WEBSITE INTERAKTIF ANDA SENDIRI
Anda juga bisa membuat website interaktif Anda sendiri karena saat ini cukup banyak tools yang bisa dimanfaatkan untuk hal tersebut. Tutorial juga sudah sangat mudah ditemukan di internet. Anda bisa memulai dengan mengikuti kursus simulasi website interaktif dengan HTML yang dibuat oleh Weber State University untuk membantu kita memahami bagaimana website interaktif itu sebenarnya.Kemudian meloncat ke kursus pembuatan website interaktif yang disediakan oleh CodeCademy.
Anda juga bisa menggunakan resources dibawah ini untuk belajar beberapa script dalam pembuatan website interaktif yang kekinian.
Itulah sejumlah resources dan contoh website interaktif yang dibuat dengan kekuatan HTML5, CSS dan Javascript yang bisa Anda nikmati dan jadikan inspirasi untuk project Anda berikutnya. Semoga apa yang posharian.tk sajikan ini berguna bagi Anda semua.
